<template>
	<view>
		<back :showBackText="false" :showBackIcon="true" :showBackLeft="true" :showHomeIcon="false"
			customClass="bg-gradual-blue text-white" title="筛选"></back>

		<!-- 页面内容 -->
		<view class="filter-container">
			<!-- 我的科目 -->
			<view class="section">
				<view class="section-header">
					<view class="section-title">
						<view class="title-indicator"></view>
						<text class="title-text">我的科目</text>
					</view>
					<text class="section-action"></text>
				</view>
				<view class="subjects-grid">
					<view 
						v-for="(subject, index) in mySubjects" 
						:key="index"
						class="subject-card selected"
					>
						<text class="subject-name">{{ subject.name }}</text>
						<text class="cuIcon-close remove-icon" @tap="removeMySubject(index)"></text>
					</view>
				</view>
			</view>

			<!-- 考试专业和课程循环展示 -->
			<view 
				v-for="(profession, professionIndex) in examData.professions" 
				:key="professionIndex"
				class="section"
				v-if="profession.courses && profession.courses.length > 0"
			>
				<view class="section-header">
					<view class="section-title">
						<view class="title-indicator"></view>
						<text class="title-text">{{ profession.name }}</text>
					</view>
					<text class="section-action">点击选择课程</text>
				</view>
				<view class="subjects-grid">
					<view 
						v-for="(course, courseIndex) in profession.courses" 
						:key="courseIndex"
						v-if="course.is_collected !== 1"
						:class="['subject-card', 'add-card']"
						@tap="toggleCourse(professionIndex, courseIndex)"
					>
						<text class="cuIcon-add add-icon"></text>
						<text class="subject-name">{{ course.name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部确认按钮 -->
		<view class="bottom-actions">
			<button class="confirm-btn" @tap="confirmSelection">我选好了</button>
		</view>
	</view>
</template>

<style src="./filter.css"></style>
<script src="./filter.js"></script>